<template>
  <h2>MGraphRelation 关系图组件</h2>
  <p>本组件的配置与PC版相同。显示上只有 toolbar 不同。</p>

  <h3>MGraphRelation 属性</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>MGraphRelation data说明</h3>
  <table-info type="param" :data="paramTable"></table-info>
  <h3>MGraphRelation 事件</h3>
  <table-info type="event" :data="eventTable"></table-info>
  <h3>MGraphRelation 实例属性</h3>
  <table-info type="expose" :data="exposeTable"></table-info>

  <h3>案例</h3>
  <code-demo-mobile
    style="height: 300px"
    :code="htmlCode"
    :scriptCode="scriptCode"
  >
    <m-graph-relation
      style="width: 100%; height: 200px"
      showToolbar
      :data="data"
      :mouseZoomable="false"
      @clickLink="clickLink"
    ></m-graph-relation>
  </code-demo-mobile>
</template>

<script setup>
import data from '../../PC/Graph/relation/relation-data'
import {
  clickLink,
  scriptCode,
  propsTable,
  paramTable,
  exposeTable,
  eventTable,
} from '../../PC/Graph/relation/config'

const htmlCode = `<m-graph-relation
  style="width: 100%; height: 200px"
  showToolbar
  :data="data"
  :mouseZoomable="false"
  @clickLink="clickLink"
></m-graph-relation>`
</script>
